<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>关卡</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/barrier.css" />
		<link rel="stylesheet" type="text/css" href="css/hehua.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

			<div class="top-btnBack" onclick="history.go(-1);">
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-logo2">
			</div>
		</div>

		<div class="content">
			<!--<div class="logo">
      <img src="img/logo.png" />
    </div>
    <div class="theme">
      <img src="img/theme.png" />
    </div>
    <div class="subTop">
      <div class="picture">
        <img src="img/title2.png" />
      </div>

    </div>
    <div class="back">
      <div class="backBtn">
        <a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
      </div>

    </div>-->
			<div class="middlePath">

				<div class="title">
					<img src="img/barrier_title.png" alt="">
				</div>
				<div class="middleContent">
					<div class="barrierOut" v-for="(barrier,index) in barriers" :key="barrier.id" @click="choseBarrier(index)">
						<div class="barrierItem">{{barrier.num}}</div>

					</div>
				</div>
			</div>
			<!--<div class="bottom-logo">
      <img src="img/bottom_logo2.png" />
    </div>-->
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '.content',
			data: {
				barriers: [{
						id: 1,
						num: 1
					},
					{
						id: 2,
						num: 2
					},
					{
						id: 3,
						num: 3
					},
					{
						id: 4,
						num: 4
					},
					{
						id: 5,
						num: 5
					},
					{
						id: 6,
						num: 6
					},
					{
						id: 7,
						num: 7
					},
					{
						id: 8,
						num: 8
					},
					{
						id: 9,
						num: 9
					},
					{
						id: 10,
						num: 10
					},
					{
						id: 11,
						num: 11
					},
					{
						id: 12,
						num: 12
					},
					{
						id: 13,
						num: 13
					},
					{
						id: 14,
						num: 14
					},
					{
						id: 15,
						num: 15
					},
					{
						id: 16,
						num: 16
					},
					{
						id: 17,
						num: 17
					},
					{
						id: 18,
						num: 18
					},
					{
						id: 19,
						num: 19
					},
					{
						id: 20,
						num: 20
					},
					{
						id: 21,
						num: 21
					},
					{
						id: 22,
						num: 22
					},
					{
						id: 23,
						num: 23
					},
					{
						id: 24,
						num: 24
					},
					{
						id: 25,
						num: 25
					},
					{
						id: 26,
						num: 26
					},
					{
						id: 27,
						num: 27
					},
					{
						id: 28,
						num: 28
					},
					{
						id: 29,
						num: 29
					},
					{
						id: 30,
						num: 30
					},
					{
						id: 31,
						num: 31
					},
					{
						id: 32,
						num: 32
					},
					{
						id: 33,
						num: 33
					},
					{
						id: 34,
						num: 34
					},
					{
						id: 35,
						num: 35
					},
					{
						id: 36,
						num: 36
					},
					{
						id: 37,
						num: 37
					},
					{
						id: 38,
						num: 38
					},
					{
						id: 39,
						num: 39
					},
					{
						id: 40,
						num: 40
					},
					{
						id: 41,
						num: 41
					},
					{
						id: 42,
						num: 42
					},
					{
						id: 43,
						num: 43
					},
					{
						id: 44,
						num: 44
					},
					{
						id: 45,
						num: 45
					},
					{
						id: 46,
						num: 46
					},

				]
			},
			methods: {
				choseBarrier(index) {
					console.log(index + 1)
				}
			}
		})
	</script>

</html>